<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>
<form>
  我是表单，从此开始通过ajax提交请求<br>
  <input type="button" value="Get请求"  onclick="btnGet()">
  <input type="button" value="Post请求"  onclick="btnPost()">
</form>
<script src="js/axios-0.18.0.js"></script>
<script>

  function btnGet(){
    console.log("send btnGet...");
    // 发送axios get请求
    // axios框架，定义好的一个方法，底层用了ajax原生异步发送
    // {}自定义JS对象
    // 演示JSON字符串
    // 定义一个JS对象
    var userData = {
      username:"zhangsan",
      password:"123"
    };
    // 打印JS对象
    alert(userData);
    console.log(userData);
    // JSON数据，把JS对象，转JSON字符串
    var strJSON = JSON.stringify(userData);
    // {"username":"zhangsan","password":"123"}
    alert(strJSON);
    console.log(strJSON);

    //================================
    //1. 定义一个JSON字符串
    var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'
    alert(jsonStr);
    //2. 将 JSON 字符串转为 JS 对象
    let jsObject = JSON.parse(jsonStr);
    alert(jsObject.age)






    // axios发送了一个异步请求
    axios({
      method:"get",
      url:"http://localhost:8080/userdemo/axiosServlet?username=zhangsan"
    }).then(function (resp){
      alert(resp.data);
    });

  }
  function btnPost(){
    console.log("send btnPost...");
  }
</script>
</body>
</html>